<template>
  <el-upload
    :id="fileKey"
    :key="fileKey"
    v-model="value"
    :data="qiniuDataObj"
    show-file-list
    :on-progress="beforeAvatarUpload"
    :on-preview="handlePictureCardPreview"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :action="actionUrl"
    :on-exceed="handleExceed"
    :file-list="showList"
    :limit="maxLimit"
    :disabled="isDisabled"
    multiple
    style="width: 200px"
  >
    <el-button v-if="!isDisabled" size="small" type="primary">点击上传</el-button>
  </el-upload>
  <!--    <el-dialog  :close-on-click-modal="false"  key="imgShow" :visible.sync="dialogVisible" :modal="false">-->
  <!--      <img width="100%" :src="dialogImageUrl" alt="">-->
  <!--    </el-dialog>-->
</template>

<script>

export default {
  props: {
    value: {
      type: String
    }, isDisabled: {
      default: false
    }, fileKey: { default: '' },
    maxLimit: { default: 20 }
  },
  data() {
    return {
      showList: [],
      waitFileList: [],
      qiniuDataObj: { token: '' },
      fileUrl: process.env.BASE_FILE_URL,
      actionUrl: process.env.VUE_APP_BASE_API + '/system/oss/uploadFile',
      dialogImageUrl: null,
      dialogVisible: false,
      fileListSort: []
    }
  },
  watch: {
    value() {
      this.showList = []
      if (this.value != null) {
        var json
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [{ url: this.value }]
          this.$emit('input', JSON.stringify([{ url: this.value }]))
        }
        for (let j = 0; j < json.length; j++) {
          var httpUrl = json[j].url
          if (httpUrl.indexOf('http') !== 0) {
            // eslint-disable-next-line no-const-assign
            httpUrl = this.fileUrl + httpUrl
          }
          this.showList.push({
            name: json[j].name,
            url: httpUrl,
            response: { key: json[j].url }
          })
        }
      }
    },
    fileKey(newQuestion, oldQuestion) {
      this.showList = []
      if (this.value != null) {
        var json
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [{ url: this.value }]
          this.$emit('input', JSON.stringify([{ url: this.value }]))
        }
        for (let j = 0; j < json.length; j++) {
          var httpUrl = json[j].url
          if (httpUrl.indexOf('http') !== 0) {
            // eslint-disable-next-line no-const-assign
            httpUrl = this.fileUrl + httpUrl
          }
          this.showList.push({
            name: json[j].name,
            url: httpUrl,
            response: { key: json[j].url }
          })
        }
      }
    }
  },
  created() {
    this.showList = []
    if (this.value != null) {
      var json
      try {
        json = JSON.parse(this.value)
      } catch (e) {
        json = [{ url: this.value }]
        this.$emit('input', JSON.stringify([{ url: this.value }]))
      }
      for (let j = 0; j < json.length; j++) {
        var httpUrl = json[j].url
        if (httpUrl.indexOf('http') !== 0) {
          // eslint-disable-next-line no-const-assign
          httpUrl = this.fileUrl + httpUrl
        }
        this.showList.push({
          name: json[j].name,
          url: httpUrl,
          response: { key: json[j].url }
        })
      }
    }
  },
  methods: {
    beforeAvatarUpload(event, file, fileList) {
      this.fileListSort = fileList
    },
    handleExceed(files, fileList) {
      this.$message.warning(`只能上传` + this.maxLimit + '个文件，请重新上传')
    },
    // 放大显示图片
    handlePictureCardPreview(file) {
      console.log(file)
      if (file.response.key != null) {
        if (file.response.key.indexOf('http') === 0) {
          window.open(file.response.key)
        } else {
          window.open(this.fileUrl + file.response.key)
        }
      } else {
        window.open(this.fileUrl + file.response.data.address)
      }
    },
    // 上传成功回调
    handleSuccess(res, file, fileList) {
      if (this.waitFileList.length == 0 && this.value != null) {
        this.waitFileList = JSON.parse(this.value)
      }
      this.waitFileList.push({ url: res.data.address, name: res.data.originalName })
      if (this.waitFileList.length == fileList.length) {
        var json = []
        for (let i = 0; i < fileList.length; i++) {
          json.push({ 'name': fileList[i].response.data.originalName, 'url': fileList[i].response.data.address })
        }
        this.$emit('input', JSON.stringify(json))
        this.waitFileList = []
      }
    },
    // 删除回调
    handleRemove(file, fileList) {
      var json
      if (this.value == null) {
        json = []
      } else {
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [{ url: this.value }]
        }
      }
      json.splice({ url: file.url, name: file.name }, 1)
      if (json.length === 0) {
        this.$emit('input', null)
      } else {
        this.$emit('input', JSON.stringify(json))
      }
    }
  }
}
</script>

<style scoped>

</style>
